<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules, ElMessage, UploadProps } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { $InsertUser, $LoginId } from '@/api/user'
import { blobUrlToBase64 } from '@/utils/Base64'

const emit = defineEmits(['close-modal', 'confirm-modal'])
//隐藏弹框
const closeModal = () => {
    emit('closeModal')
}
// 确认
const confirmModal = (formEl: FormInstance | undefined, ruleForm) => {
    emit('confirmModal', formEl, ruleForm)
}

const props = defineProps({
    text: {
        type: String,
        default: ''
    },
    id: {
        type: Number,
        default: 0
    }
})

// 定义表格接口
interface RuleForm {
    id: number
    name: string
    userpassword: string
    phone: string
    email: string
    sex: string
    address: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    id: props.id,
    name: '',
    userpassword: '',
    phone: '',
    email: '',
    sex: '',
    address: ''
})

onMounted(() => {
    if (ruleForm.id) {
        $LoginId(ruleForm).then(res => {
            Object.assign(ruleForm, res.data);
        })
    }
})

// 规则
const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '内容未填写', trigger: 'blur' },
    ],
    userpassword: [
        { required: true, message: '内容未填写', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '内容未填写', trigger: 'blur' },
    ],
    email: [
        { required: true, message: '内容未填写', trigger: 'blur' },
    ],
    sex: [
        { required: true, message: '内容未选择', trigger: 'blur' },
    ],
    address: [
        { required: true, message: '内容未填写', trigger: 'blur' },
    ],
})

// 重置
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<template>
    <div class="user">
        <div class="user-content" :style="{ height: text == '编辑' ? '580px' : '530px' }">
            <div class="user-top">{{ text }}
                <button class="close" @click="closeModal">&times;</button>
            </div>
            <div class="user-body">
                <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                    class="demo-ruleForm" status-icon>
                    <el-form-item label="id" v-if="text == '编辑'">
                        <el-input :value="ruleForm.id" disabled />
                    </el-form-item>
                    <el-form-item label="名字" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入名字" />
                    </el-form-item>
                    <el-form-item label="密码" prop="phone">
                        <el-input v-model="ruleForm.phone" placeholder="请输入密码" />
                    </el-form-item>
                    <el-form-item label="电话" prop="userpassword">
                        <el-input v-model="ruleForm.userpassword" placeholder="请输入电话" />
                    </el-form-item>
                    <el-form-item label="邮件" prop="email">
                        <el-input v-model="ruleForm.email" placeholder="请输入邮件" />
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-radio-group v-model="ruleForm.sex">
                            <el-radio value="男">男</el-radio>
                            <el-radio value="女">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="地址" prop="address">
                        <el-input v-model="ruleForm.address" type="textarea" placeholder="请输入地址" resize="none" />
                    </el-form-item>
                    <el-form-item>
                        <div class="btn">
                            <el-button type="primary" @click="confirmModal(ruleFormRef, ruleForm)">
                                确定
                            </el-button>
                            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.user {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    .user-content {
        background-color: #fff;
        border-radius: 10px;
        height: 530px;
        width: 600px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        animation: slideDown 0.1s ease-out;

        .user-top {
            text-align: center;
            height: 50px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background: #408cff;
            color: #fff;
            padding: 15px 0;

            .close {
                padding: 0;
                padding-right: 10px;
                margin-top: -7px;
                background: transparent;
                border: 0;
                float: right;
                font-size: 21px;
                color: #fff;
                line-height: 1;
                font-weight: bold;
                cursor: pointer;
            }
        }

        .user-body {
            display: flex;
            align-items: center;
            flex-direction: column;
            text-align: center;
            padding: 40px 20px;
            color: #333;
            font-size: 14px;

            .el-form-item {
                width: 300px;

                .btn {
                    display: flex;
                    width: 100%;
                    justify-content: center;
                }

                :deep(.el-textarea__inner) {
                    height: 100px;
                }

                :deep(.avatar-uploader .el-upload) {
                    border: 1px dashed var(--el-border-color);
                    border-radius: 6px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    transition: var(--el-transition-duration-fast);
                }

                :deep(.avatar-uploader .el-upload):hover {
                    border-color: var(--el-color-primary);
                }

                .el-icon.avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 100px;
                    height: 100px;
                    text-align: center;
                }

                :deep(.avatar-uploader .avatar) {
                    width: 100px;
                    height: 100px;
                    display: block;
                }
            }



        }
    }
}

// 动画
@keyframes slideDown {
    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(0);
    }
}
</style>